import * as React from 'react';
import AppBar from '@mui/material/AppBar';

import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import Brightness4Icon from '@mui/icons-material/Brightness4';
import Brightness7Icon from '@mui/icons-material/Brightness7';

const Header = ({mode, toggleTeme })=>{
  return (
    <Box sx={{ flexGrow: 1,
      justifyContent:"space-between",
      bgcolor:  (mode === 'dark' ?  'hsl(209, 23%, 22%)' : 'hsl(0, 0%, 100%)'),
      width:"100%",
      fontFamily:"fontawesome-mini",
      fontWeight:400,
      color: 'text.primary', 
      }}>
    <AppBar position="static" >
      <Toolbar sx={{bgcolor: (mode === 'dark' ? ' hsl(209, 23%, 22%)' : 'hsl(0, 0%, 100%)'),
                    color: 'text.primary',
                    boxShadow: 
                      (mode === 'dark' ? `0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);` : `0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);`),
                    p:1,
                    flexWrap: "wrap"
                    }}>
        <Typography
          component="div"
          variant="h2"
          justifyContent="flex-start"
          align="left"
          color="text.primary"
          sx={{m:1, flexGrow: 1, fontSize:"3rem", fontFamily:"fontawesome-mini", fontWeight:500}}
        >
          Where in the world?
        </Typography>
        <Box sx={{display:"flex",flexWrap:"noWrap",alignItems:"center"}}>
          <IconButton sx={{ m: 2 }} onClick={toggleTeme} color="inherit">
            {mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
            </IconButton>
            <Typography
              component="h6"
              variant="h6"
              align="center"
              color="text.primary"
              noWrap
            >
            {mode} mode
            </Typography>
        </Box>
      </Toolbar>
    </AppBar>
  </Box>
  )

}

export default Header;